<template>
  <div class="SongDetails">
    <div class="SongDetails-songInfo">
      <img class="SongDetails-img" :src="song.al.picUrl" alt="" />
      <p class="SongDetails-album">专辑：{{ song.al.name }}<a href=""></a></p>
      <p class="SongDetails-time">
        发行时间：<span>{{ dayjs(song.publishTime).format("YYYY-MM-DD") }}</span>
      </p>
    </div>
    <div class="SongDetails-info">
      <h1 class="SongDetails-title">{{ song.al.name }}</h1>
      <p class="Song-name">{{ song.ar[0].name }}</p>
      <div class="SongDetails-operation">
        <div class="SongDetails-paly">
          <i class="iconfont icon-bofang" @click="herfSongPlay"></i> 立即播放
        </div>
        <div class="Collection" v-if="like" @click="handleLike">
          <i class="iconfont icon-xihuan1" style="color: pink"></i> 已收藏
        </div>
        <div class="Collection" v-else @click="handleLike">
          <i class="iconfont icon-xihuan"></i> 收藏
        </div>

        <div class="SongDetails-share"><i class="iconfont icon-fenxiang"></i> 分享</div>
        <div class="copy-lyric" @click="copy">
          <i class="iconfont icon-fuzhi_o"></i> 复制歌词
        </div>
      </div>
      <div class="lyric" :style="show ? 'overflow:hidden' : 'overflow:inherit'">
        <div class="SongDetails-lyric">
          <p v-for="item in Lyric">{{ item }}</p>
          <span
            class="lyric-shrink"
            :style="show ? 'position: absolute' : 'position: none'"
            @click="handleShrink"
            >{{ show ? "展开" : "收起" }}</span
          >
        </div>
        <textarea ref="text"> </textarea>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useRouter } from "vue-router";
import { getSongDetail, getLyric, setSongLike } from "../../../api/Player/Player";
import dayjs from "dayjs";
export default defineComponent({
  name: "SongDetails",
});
</script>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
let show = ref(true);
function handleShrink() {
  show.value = !show.value;
}
let like = ref(false);
let song = ref({
  al: {
    id: 0,
    name: "",
    picUrl: "",
  },
  ar: [
    {
      name: "",
    },
  ],
});
let Lyric = ref([]);
onMounted(async () => {
  const result = await getSongDetail(347230);
  song.value = result.data.songs[0];
  const result2 = await getLyric(347230);
  const lyric = result2.data.lrc.lyric.split("\n").toString();
  Lyric.value = lyric.split(/\[\d{2}\:\d{2}\.\d{3}\]/);
  // 喜欢列表
  // await getSongLikeList()
  // 设置喜欢歌曲
});
const handleLike = async function () {
  like.value = !like.value;
  await setSongLike({
    id: 347230,
    like: like.value,
  });
};

const router = useRouter();
// 跳播放
const herfSongPlay = () => {
  router.push({
    path: "/player",
    id: song.id,
  });
};
const text = ref();

const copy = () => {
  text.value.value = Lyric.value.join("");

  text.value.select();
  document.execCommand("copy");
  alert("复制成功，请自行粘贴");
};
</script>
<style scoped>
.SongDetails {
  width: 1200px;
  margin-top: 40px;
  margin: 0 auto;
  display: flex;
}
.SongDetails-songInfo {
  width: 300px;
  height: 394.4px;
  margin-right: 80px;
}
.SongDetails-img {
  width: 300px;
  height: 300px;
}
.SongDetails-album,
.SongDetails-time {
  color: #909399;
}
.SongDetails-album a {
  color: #333;
  text-decoration: none;
}
.SongDetails-time {
  color: #333;
}
.SongDetails-info {
  width: 820px;
}
.SongDetails-title {
  font-size: 28px;
  font-weight: 600px;
}
.Song-name {
  color: #606266;
  font-size: 14px;
  margin-top: 10px;
}
.SongDetails-operation {
  height: 40.4px;
  margin-top: 40px;
  display: flex;
}
.SongDetails-paly {
  background-color: rgb(226, 21, 21);
  color: white;
  width: 136px;
  height: 40.4px;
  border-radius: 20px;
  text-align: center;
  line-height: 40.4px;
  margin-right: 10px;
}
.SongDetails-paly:hover {
  background-color: rgb(231, 107, 107);
}
.Collection,
.SongDetails-share {
  width: 108px;
  height: 40.4px;
  border-radius: 20px;
  text-align: center;
  line-height: 40.4px;
  margin: 0 10px;
  background-color: #f8f8f8;
  cursor: pointer;
  color: #606266;
}
.copy-lyric {
  width: 136px;
  height: 40.4px;
  border-radius: 20px;
  text-align: center;
  line-height: 40.4px;
  margin: 0 10px;
  background-color: #f8f8f8;
  color: #606266;
  cursor: pointer;
}
.lyric {
  height: 480px;
  overflow: hidden;
}
.lyric-shrink {
  bottom: 30px;
  color: red;
  cursor: pointer;
}
.SongDetails-lyric p {
  font-size: 14px;
}
</style>
